<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Criar Persona</title>

<link rel="stylesheet" type="text/css" href="images/view.css" media="all">
<script type="text/javascript" src="images/view.js"></script>


	<style type="text/css">
	

    .divOuter{
        display:inline;
        text-align:center;
    }

    .divInner, .divInner1, .divInner2, .divInner3{
        border: 1px solid;
        float:left;
        width:130px;
        height:200px;
        margin-left:20px;
        margin-right:20px;
		margin-top:20px;
		margin-bottom:70px;
		
    }
	
#personacard {
 background: url(pcard.png) bottom right
}

#personacard-convidado {
 background: url(pcard-convidado.png) bottom right
}

#descricao-card {
 position:relative;
 top:23px;
 left:0px;
 font-size:12px;
}

#foto-card {
 background: url(foto-card.png);
 position:relative;
 top:27px;
 left:0px;
 height: 100px;
}

#foto-card-sempersona {
 position:relative;
 top:27px;
 left:0px;
 height: 100px;
}



#projeto-card {
 position:relative;
 top:90px;
 left:0px;
 height: 100px;
 font-size:12px;
}
    </style>
	
	<script type="text/javascript"></script>
	
	<style type="text/css" media="all">
		@import "images/lay.css";
	</style>
	
</head>

<body>

<div id="container">

	<div id="intro">
		<div id="pageHeader">
			<h1><span>Header</span></h1>
			<h2><span>Sub-header</span></h2>
		</div>

		<div id="quickSummary">
		
			<p class="p1"><span></span></p>
			<p class="p2"><span>E-mail: voce@local.com</span></p>
			<p class="p2"><span>E-mail: voce@local.com</span><br/>
			Idade: 20 anos<br/>
			Sexo: Não se sabe<br/>
			Telefone: Quebrou</p>
			
		</div>

		<div id="preamble">
		<br/>
		<br/>
		
	<div id="form_container">
	
		<form id="form_443163" class="appnitro" enctype="multipart/form-data" method="post" action="">
					<div class="form_description">
			<h2>Criação de novo Persona</h2>
			<p>Preencha todos os campos e clique em Criar.</p>
		</div>						
			<ul >
			
					<li id="li_8" >
		<label class="description" for="element_8">Nome </label>
		<span>
			<input id="element_8_1" name= "nome" class="element text" maxlength="255" size="8" value=""/>
			<label>Nome</label>
		</span>
		
		</li>		<li id="li_3" >
		<label class="description" for="element_3">Idade </label>
		<div>
			<input id="element_3" name="idade" class="element text small" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_4" >
		<label class="description" for="element_4">Sexo </label>
		<div>
		<select class="element select small" id="element_4" name="sexo"> 
			<option value="" selected="selected"></option>
<option value="1" >Masculino</option>
<option value="2" >Feminino</option>

		</select>
		</div> 
		</li>		<li id="li_5" >
		<label class="description" for="element_5">Descrição </label>
		<div>
			<input id="element_5" name="descricao" class="element text large" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_6" >
		<label class="description" for="element_6">Imagem do seu Persona</label>
		<div>
			<input id="element_6" name="img" class="element file" type="file"/> 
		</div>  
		</li>		<li class="section_break">
			
			<p></p>
		</li>
			<label class="description"><h2>Semântica </h2></label>
			<br/><br/>
			
			
			
			
			<pre>Ação           Reflexão</pre><br/>
	<input type="range" name="acaoreflexao" min="0" max="10" value="5" step="1" /><br/>
<br/>
<br/>


<pre>Monocromático       Policromático</pre><br/>
<input type="range" name="monopoli" min="0" max="10" value="5" step="1" />


<br/>
<br/>
<br/>

<pre>Coletivo     Individual</pre><br/>
<input type="range" name="coleindi" min="0" max="10" value="5" step="1" />



<br/>
<br/>
<br/>
<br/>

					<li class="buttons">
			    <input type="hidden" name="form_id" value="443163" />
			    
				<input id="saveForm" class="button_text" type="submit" name="submit" value="Criar" />
		</li>
			</ul>
		</form>	
		
	</div>
	
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			

		<div id="footer">
			Este site foi bla bla bla bla bla bla bla bla. Mais info...
			Aqui é o footer.
		</div>

	</div>

	
	<div id="linkList">
		<!--extra div for flexibility - this list will probably be the trickiest spot you'll deal with -->
		<div id="linkList2">

		<!-- If you're wondering about the extra &nbsp; at the end of the link, it's a hack to meet WCAG 1 Accessibility. -->
		<!-- I don't like having to do it, but this is a visual exercise. It's a compromise. -->
			<div id="lselect">
				<h3 class="select"><span>Seção:</span></h3>
				<!-- list of links begins here. There will be no more than 8 links per page -->
				<ul>
					<li>Lista 1</li>
					<li>Lista </li>
					<li>Lista </li>
					<li>Lista </li>
					<li>Lista </li>
					<li>Lista </li>
					
				</ul>
			</div>

			<div id="larchives">
				<h3 class="archives"><span>Seção:</span></h3>
				<ul>
					<li>Lista </li>
					<li>Lista </li>
					</ul>
			</div>
			
			<div id="lresources">
				<h3 class="resources"><span>Resources:</span></h3>
				<ul>
					<li>Lista </li>
					<li>Lista </li>
					<li>Lista </li>
					<li>Lista </li>
					<li>Lista </li>
					</ul>
			</div>
		</div>
	</div>


</div>

<!-- These extra divs/spans may be used as catch-alls to add extra imagery. -->
<!-- Add a background image to each and use width and height to control sizing, place with absolute positioning -->
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>

</body>
</html>
